<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>计算机网络课程资源共享网</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/css/index_main.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">
    <link th:href="@{/css/semantic.min.css}" rel="stylesheet">
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script th:src="@{/js/new_play.js}">
    </script>

    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" th:src="@{/layer/layer.js}"></script>
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
</head>
<body >

<!--菜单-->
<ul class="layui-nav layui-bg-blue" lay-filter="">
    <li class="layui-nav-item layui-this"><a href="/" style="font-size: 20px">首页</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;" style="font-size: 20px">习题库</a>
        <dl class="layui-nav-child"> <!-- 二级菜单 -->
            <dd>
                <a th:href="@{/item/chapter/overview}">分章节练习</a>
            </dd>
            <dd>
                <a th:href="@{/item/overview}">分题型练习</a>
            </dd>
        </dl>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;" style="font-size: 20px">课程分类</a>
        <dl class="layui-nav-child"> <!-- 二级菜单 -->
            <dd>
                <a th:href="@{'/course/type_show/'+${coursetype.getId()}}" th:each="coursetype:${coursetypes}" th:text="${coursetype.getCourse_name()}"></a>
            </dd>
            <dd>
                <a th:href="@{/course/type_show/0}" >全部课程</a>
            </dd>
        </dl>
    </li>
    <li class="layui-nav-item" th:if="${session.loginuser} == null"><a th:href="@{/community/index}" style="font-size: 20px">社区</a></li>
    <li class="layui-nav-item " th:if="${session.loginuser} != null">
        <a href="javascript:;" style="font-size: 20px">社区</a>
        <dl class="layui-nav-child">
            <dd><a th:href="@{/community/index}">社区首页</a></dd>
            <dd><a th:href="@{/stu/community/commenting}">发布话题</a></dd>
            <dd><a th:href="@{/stu/community/management}">我的话题</a></dd>
            <dd><a th:href="@{/stu/chat_all}" target="_blank">头脑风暴</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a th:href="@{/file/list}" style="font-size: 20px">资料干货</a></li>

<!--如果没有登录-->
    <li class="layui-nav-item" th:if="${session.loginuser} == null">
        <a th:href="@{/login}" style="font-size: 20px">登录</a>
    </li>
    <li class="layui-nav-item" th:if="${session.loginuser} == null">
        <a th:href="@{/register}" style="font-size: 20px">注册</a>
    </li>
    <!--如果没有登录-->

    <!--如果登录-->
    <li class="layui-nav-item" th:if="${session.loginuser} != null">
        <a href="javascript:;" style="font-size: 20px">我的班级</a>
        <dl class="layui-nav-child"> <!-- 二级菜单 -->
            <dd>
                <a th:href="@{/stu/map/show}">班级签到</a>
            </dd>
            <dd>
                <a th:href="@{/stu/exam/overview}">班级考试</a>
            </dd>
            <dd>
                <a th:href="@{/stu/exam/mydegree/list}">我的考试成绩</a>
            </dd>
        </dl>
    </li>
    <li class="layui-nav-item" th:if="${session.loginuser} != null">
        <a href="javascript:;" style="font-size: 20px">好友管理</a>
        <dl class="layui-nav-child"> <!-- 二级菜单 -->
            <dd>
                <a th:href="@{/stu/friends/list}">好友列表</a>
            </dd>
            <dd>
                <a th:href="@{/stu/friends/search}">搜索好友</a>
            </dd>
        </dl>
    </li>
    <li class="layui-nav-item" th:if="${session.loginuser} != null">
        <img th:src="@{'/show/'+${session.loginuser.getId()}}" class="layui-nav-img">[[${session.loginuser.username}]]
        <dl class="layui-nav-child">
            <dd><a th:href="@{/stu/center}">个人中心</a></dd>
            <dd><a th:href="@{/stu/logout}">退出</a></dd>
        </dl>
    </li>

    <!--如果登录-->
</ul>
<!--菜单-->


<!--分割线-->
<h2 class="ui center aligned blue icon header">
    <i class="circular student icon"></i>
    Let's Study
</h2>
<!--分割线-->



<!--轮播-->
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md9">
<div class="layui-carousel" id="test1" >
    <div carousel-item>
        <a href=""><img th:src="@{/images/first.jpg}"></a>
        <img th:src="@{/images/third.png}">
        <img th:src="@{/images/second.jpg}">
        <img th:src="@{/images/main_1.jpg}">
        <img th:src="@{/images/main_2.jpg}">
    </div>
</div>
        </div>
        <div class="layui-col-md3">
            <div class="ui  container" >
                <div class="ui segment">
                    <h1 class="ui blue  header">计算机网络</h1>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;计算机网络是指将地理位
                        置不同的具有独立功能的多台计算机及其外部设备，
                        通过通信线路连接起来，在网络操作系统，网络管理软件及网络通信协议的管理和协调下，
                        实现资源共享和信息传递的计算机系统</p>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;最简单的计算机网络就只有两台计算机和连接它们的
                        一条链路，即两个节点和一条链路。自从计算机网络出现以后，它的发展速度与应用的广泛程度十分惊人</p>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;20世纪90年代至今的第四代计算机网络，由于局域网技术发展成熟，出现光纤及高速网络技术，
                        整个网络就像一个对用户透明的大的计算机系统，发展为以因特网( Internet)为代表的互联网</p>
                    <button class="layui-btn" id="layuiopen">了解一下</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!--轮播-->
<br>


<!--分割线-->
<h2 class="ui center aligned blue icon header">
    <i class="circular trophy  icon"></i>
    精品课程
</h2>
<!--分割线-->

<!--回至顶部-->
<ul class="layui-fixbar">
    <li id="go_top" class="layui-icon layui-fixbar-top" lay-type="top" style="background-color: rgb(0, 150, 136); display: list-item;" ></li>
</ul>
<!--回至顶部-->

<!--显示课程-->
<div class="ui centered fluid cards" >
    <div class="card" th:each="course:${topcourses}">
        <div class="ui middle image">
            <a th:href="@{'/course/show/'+${course.getId()}}">
            <img  th:src="@{'https://wk2020.oss-cn-shenzhen.aliyuncs.com/'+${course.getCourse_image()}}"
                 data-title="开始答题"
                 data-content="可以保存"   >
            </a>
        </div>
        <div class="content">
            <a class="header"  th:text="${course.getCourse_name()}"></a>
            <!--            <div class="meta">-->
            <!--                <a>Friends</a>-->
            <!--            </div>-->
            <div class="description" >
                <i class="layui-icon layui-icon-praise"><em th:text="${course.getPraise()}"></em></i><br>
                <i class="layui-icon layui-icon-time"><em th:text="${#dates.format(course.getCreatetime(),'yyyy年MM月dd日')}"></em></i>
            </div>
        </div>
        <div class="extra content">

            <a th:href="@{'/course/show/'+${course.getId()}}">
      <span class="right floated">
        观看课程
      </span>
            </a>
            <span>
              <a th:href="@{'/course/comment/'+${course.getId()}}">
                评论
            </a>
      </span>
        </div>
    </div>
</div>
<!--显示课程-->

<div class="ui blue divider"></div>

<!--图表-->
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1400px;height:400px;"></div>
<!--图表-->
<div class="ui blue divider"></div>
<!--内容丰富-->
<div class="main product">
    <div class="layui-container">
        <div class="content layui-row">
            <div class="layui-col-xs12 layui-col-sm6 layui-col-md7 layui-col-lg6 content-img"><img th:src="@{/images/network_1.jpg}" style="width: 500px"></div>
            <div class="layui-col-xs12 layui-col-sm6 layui-col-md5 layui-col-lg6 right">
                <p class="label">计算机网络体系结构</p>
                <p class="detail">21 世纪的一些重要特征是数字化、网络化和信息化，它是一个以网络为核心的信息时代。
                    网络现在已经成为信息社会的命脉和发展知识经济的重要基础。
                </p>
                <div><a th:href="@{/course/type_show/1}">详细查看 ></a></div>
            </div>
        </div>
        <div class="content layui-row">
            <div class="layui-col-xs12 layui-col-sm6 layui-col-md7 layui-col-lg6 content-img"><img th:src="@{/images/network_2.jpg}" style="width: 500px"></div>
            <div class="layui-col-xs12 layui-col-sm6 layui-col-md5 layui-col-lg6 right">
                <p class="label">物理层</p>
                <p class="detail">物理层考虑的是怎样才能在连接各种计算机的传输媒体上传输数据比特流，而不是指具体的传输媒体。
                    物理层的作用是要尽可能地屏蔽掉不同传输媒体和通信手段的差异。
                    用于物理层的协议也常称为物理层规程 (procedure)。
                </p>
                <div><a th:href="@{/course/type_show/2}">详细查看 ></a></div>
            </div>
        </div>
        <div class="content layui-row">
            <div class="layui-col-xs12 layui-col-sm6 layui-col-md7 layui-col-lg6 content-img"><img th:src="@{/images/network_3.jpg}" style="width: 500px"></div>
            <div class="layui-col-xs12 layui-col-sm6 layui-col-md5 layui-col-lg6 right">
                <p class="label">数据链路层</p>
                <p class="detail">数据链路层使用的信道主要有以下两种类型：
                    点对点信道。这种信道使用一对一的点对点通信方式。
                    广播信道。这种信道使用一对多的广播通信方式，因此过程比较复杂。广播信道上连接的主机很多，因此必须使用专用的共享信道协议来协调这些主机的数据发送。
                </p>
                <div><a th:href="@{/course/type_show/3}">详细查看 ></a></div>
            </div>
        </div>
        <div class="content layui-row">
            <div class="layui-col-xs12 layui-col-sm6 layui-col-md7 layui-col-lg6 content-img"><img th:src="@{/images/network_4.jpg}" ></div>
            <div class="layui-col-xs12 layui-col-sm6 layui-col-md5 layui-col-lg6 right">
                <p class="label">网络层</p>
                <p class="detail">在计算机网络领域，网络层应该向运输层提供怎样的服务（“面向连接”还是“无连接”）曾引起了长期的争论。
                    争论焦点的实质就是：在计算机通信中，可靠交付应当由谁来负责？是网络还是端系统？
                </p>
                <div><a th:href="@{/course/type_show/4}">详细查看 ></a></div>
            </div>
        </div>
        <div class="content layui-row">
            <div class="layui-col-xs12 layui-col-sm6 layui-col-md7 layui-col-lg6 content-img"><img th:src="@{/images/network_5.jpg}"></div>
            <div class="layui-col-xs12 layui-col-sm6 layui-col-md5 layui-col-lg6 right">
                <p class="label">传输层</p>
                <p class="detail">从通信和信息处理的角度看，运输层向它上面的应用层提供通信服务，它属于面向通信部分的最高层，同时也是用户功能中的最低层。
                    当网络的边缘部分中的两个主机使用网络的核心部分的功能进行端到端的通信时，只有位于网络边缘部分的主机的协议栈才有运输层，而网络核心部分中的路由器在转发分组时都只用到下三层的功能。
                </p>
                <div><a th:href="@{/course/type_show/5}">详细查看 ></a></div>
            </div>
        </div>
        <div class="content layui-row">
            <div class="layui-col-xs12 layui-col-sm6 layui-col-md7 layui-col-lg6 content-img"><img th:src="@{/images/network_6.jpg}" style="width: 500px"></div>
            <div class="layui-col-xs12 layui-col-sm6 layui-col-md5 layui-col-lg6 right">
                <p class="label">应用层</p>
                <p class="detail">每个应用层协议都是为了解决某一类应用问题，而问题的解决又往往是通过位于不同主机中的多个应用进程之间的通信和协同工作来完成的。应用层的具体内容就是规定应用进程在通信时所遵循的协议。
                    应用层的许多协议都是基于客户服务器方式。客户(client)和服务器(server)都是指通信中所涉及的两个应用进程。客户服务器方式所描述的是进程之间服务和被服务的关系。客户是服务请求方，服务器是服务提供方
                </p>
                <div><a th:href="@{/course/type_show/6}">详细查看 ></a></div>
            </div>
        </div>
    </div>
</div>
<!--内容丰富-->

<!--底部-->
<!--<footer  class="ui inverted vertical segment m-padded-tb-massive">-->
<!--    <p >Copyright © <span>2020</span>  Designed-->
<!--        by Wangkan.备案号：<a href="http://www.beian.miit.gov.cn" target="_blank">粤ICP备19038182号-1</a></p>-->
<!--</footer>-->

<footer class="ui inverted vertical segment m-padded-tb-default">
    <div class="ui center aligned container">
        <p class="m-text-thin m-text-spaced m-opacity-tiny" style="font-size: small">
            <span id="htmer_time" style="color: #17fd40;font-size: small;font-weight: bolder"></span>

            | Copyright © 2019-<span>2020</span> Designed
            by Wangkan
        <div class="webLogo" style="font-size: 15px;">
            <img src="https://zhy-myblog.oss-cn-shenzhen.aliyuncs.com/static/img/webLog.png">
            <a href="http://www.beian.miit.gov.cn/" target="_blank">
                备案号：粤ICP备19038182号-1
            </a>
        </div>
        </p>
        <!--    新增内容-->

    </div>


</footer>
<!--<footer class="ui wide  leaderboard test " style="width: 100%" data-text="Copyright © 2020 Designed by wangkan">-->
<!--</footer>-->
<!--底部-->


<script>
    $(document).ready(function () {
        $('#layuiopen').click(function () {
            var ii = layer.load();
            //此处用setTimeout演示ajax的回调
            setTimeout(function(){
                layer.close(ii);
            }, 3000);

            layer.open({
                type: 2,
                title: '来源：百度百科',
                maxmin: true,
                shadeClose: true, //点击遮罩关闭层
                area : ['800px' , '520px'],
                content: '/first_video'
            });
            // layer.msg('hello');
        });

        $('#go_top').click(function () {
            $("html,body").animate({"scrollTop":0});
        })
    });

    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

        //…
    });

    //实现轮播功能
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '80%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            ,height: '400px'
            //,anim: 'updown' //切换动画方式
        });
    });
</script>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    myChart.setOption({
        title: {
            text: '计算机网络课程各章节考试分值占比'
        },
        series : [
            {
                name: '计算机网络课程',
                type: 'pie',    // 设置图表类型为饼图
                radius: '75%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                data:[          // 数据数组，name 为数据项名称，value 为数据项值
                    {value:15, name:'计算机网络体系结构'},
                    {value:5, name:'物理层'},
                    {value:15, name:'数据链路层'},
                    {value:35, name:'网络层'},
                    {value:10, name:'传输层'},
                    {value:10, name:'应用层'}
                ]
            }
        ]
    })
</script>

</body>
</html>